var loading = document.querySelector(".loading");
var num = document.querySelector(".loadnum");
var index = document.querySelector(".index");
var tBtn = document.querySelector(".tBtn");
var sBtn = document.querySelector(".startBtn");
var swiper = document.querySelector(".swiper-container");
var choose = document.querySelector(".choose");
var music = document.querySelector(".music");
var count = document.querySelector(".count");
var choA = document.querySelector(".choA");
// choA.addEventListener("click",function(){
// 	console.log(1)
// })
let arr = [];
var timer;
var musicTime;
// var i = 1;
// timer=setInterval(()=>{
// 	i++; 
// 	num.innerText=i;
// 	if(i==100){
// 		loading.style.display="none";
// 		index.style.display="block";
// 		clearInterval(timer);
// 	}
// },1000);
tBtn.addEventListener("click", function() {
	loading.style.display = "none";
	index.style.display = "block";
	choose.style.display = "none";
});

function loadMusic(src) {
	var music = document.querySelector(".music");
	// var music = document.createElement("audio");
	return new Promise((resolve, reject) => {
		music.addEventListener("canplay", function() {
			resolve();
			// music.play();
		});
		music.src = src;
		// console.log(music.src);
	});
}
ajax({
	url: "./data/music.json"
}).then((res) => {
	res = res.sort(function() {
		return Math.random() - 0.5;
	}).slice(0, 30);
	console.log(res);
	var preload;
	var mainfest;
	let newRes = res.map((e)=>{
		return e.audio;
	})
	console.log(newRes);
	function setupManifest(){
		mainfest=newRes;
	}
	// 预加载函数
	function startPreload() {
		preload = new createjs.LoadQueue(true);
		//注意加载音频文件需要调用如下代码行
		preload.installPlugin(createjs.SOUND);
		//为preloaded添加整个队列变化时展示的进度事件
		preload.addEventListener("progress", handleFileProgress);
		//为preloaded添加当队列完成全部加载后触发事件
		preload.addEventListener("complete", loadComplete);
		//设置最大并发连接数  最大值为10
		preload.setMaxConnections(10);
		preload.loadManifest(mainfest);
	}
	// 当整个队列变化时展示的进度事件的处理函数
	function handleFileProgress(event) {
		// $(".progress").text("loading..." + Math.ceil(event.loaded * 100) + "%");
		 let loadnum = document.querySelector(".loadnum");
		 loadnum.innerText=(event.loaded*100).toFixed(0);
		console.log(event.loaded);
	}
	// 处理preload添加当队列完成全部加载后触发事件
	function loadComplete() {
		// 设置定时器，当全部加载完毕后让100%停留0.4秒，提高用户体验，不至于让用户感觉不到
		window.setTimeout(() => {
			// $(".loading").remove();
			console.log("全部加载完成");
			tBtn.style.display = "block";
		}, 1000);
	}
	setupManifest();
	startPreload();
	
	// let load = 0;
	// let loadnum = document.querySelector(".loadnum");
	// res.forEach(function(el, index) {
	// 	loadMusic(el.audio).then(e => {
	// 		load++;
	// 		let pro = (load / 0.3).toFixed(0);
	// 		loadnum.innerText = pro;
	// 		if (loadnum.innerText == 100) {
	// 			tBtn.style.display = "block";
	// 		}
	// 	})
	// });
	
	return res;
}).then(res => {
	// var count = 60;
	let timer;
	sBtn.addEventListener("click", function() {
		var count=document.querySelector(".count");
		var result=document.querySelector(".result");
		var swiper = document.querySelector(".swiper-container");
		//60s倒计时
		timer=setInterval(function(){
			count.innerText--;
			if(count.innerText==0){
				clearInterval(timer);
				choose.style.display="none";
				swiper.style.display="none";
				music.pause();
			}
		},1000);
		loading.style.display = "none"
		index.style.display = "none";
		swiper.style.display = "block";
		choose.style.display = "block";
		let idx = 0;
		let score = 0;
		var li = document.querySelectorAll(".cho li");
		//渲染第一首歌
		music.src = res[idx].audio;
		music.play();
		//渲染第一组选项
		li.forEach(function(e, i) {
			e.innerText = res[idx].item[i];
		});
		li.forEach((e,i)=>{
			var onoff = true;
			var grade = document.querySelector(".score");
			var img = document.querySelector(".duanwei img")
				e.addEventListener("click",function(){
					if(onoff){
						onoff=false;
						if(idx==29){
							alert("游戏结束");
							music.pause();
							choose.style.display="none";
							swiper.style.display="none";
						}
						if(i==res[idx].answer){
							score++;
							console.log(score);
							grade.innerText=score;
						}
						idx++;
						music.src = res[idx].audio;
						music.play();
						li.forEach((el,index)=>{	
							el.innerText=res[idx].item[index];
						});
						if(score==0&&score<=6){
							img.src="img/青铜.png";
						}else if(score>7&&score<=12){
							img.src="img/白银.png";
						}else if(score>13&&score<=18){
							img.src="img/黄金.png";
						}else if(score>19&&score<=24){
							img.score="img/铂金.png"
						}else{
							img.src="img/钻石.png"
						}
						// console.log(score);
					}
				setTimeout(function(){
					onoff=true;
				},2000);
				});
		});
		//重新挑战
		var again = document.querySelector(".again");
		again.addEventListener("click",function(){
			location.reload();
		});
			var mySwiper = new Swiper ('.swiper-container', {
			  // direction: 'vertical', // 垂直切换选项
			  // loop: true, // 循环模式选项
			  // speed: 2000,
						observer:true,
						parallax:true,
						initialSlide :0,
						// autoplay:true,
						 autoplay: {
						    delay: 10000,
						    stopOnLastSlide: false,
						    disableOnInteraction: true,
						    },
						on:{
						  init: function(){
						    swiperAnimateCache(this); //隐藏动画元素 
						    swiperAnimate(this); //初始化完成开始动画
						  }, 
						  slideChangeTransitionEnd: function(){ 
						    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
						    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
						  } 
						}
			});
	});
});
function ajax({
	method = "GET",
	url
}) {
	return new Promise(function(resolve, reject) {
		var xhr = new XMLHttpRequest();
		xhr.open(method, url);
		xhr.addEventListener("readystatechange", function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					resolve(JSON.parse(xhr.response));
				} else {
					reject(new Error("ajax请求失败"));
				}
			}
		});
		xhr.send();
	});
}
